<template>
	<div class="order-details pt10">

		<van-nav-bar title="订单详情" left-text="返回" fixed left-arrow @click-left="$router.back()" />


		<div class="info mt10 mb10">
			<p>订单编号：{{order.order_number}}</p>
			<p>下单时间：{{order.create_time}}</p>
		</div>


    <div class="express-bar"></div>
		<van-cell-group>
			<van-cell icon="location-o" :title="order.shipping_name + ' ' + order.shipping_tel" :label="order.shipping_province +''+ order.shipping_city + order.shipping_county + order.shipping_address_detail" />
		</van-cell-group>
    <div class="express-bar"></div>


		<van-card v-for="(goods, goodsI) in order.orderItems" class="" :key="goodsI" :title="goods.title"
		 :desc="goods.sku_props_str" :num="goods.quantity" :price="(goods.price / 1).toFixed(2)" :thumb="goods.image">
		</van-card>



		<van-cell-group class="mt10">
			<van-cell title="商品应付款" :value="'￥' + (order.total / 1).toFixed(2)" />
			<van-cell title="运费" :value="'￥' + order.shipping_fee" />
			<van-cell title="实付款" :value="'￥' + (order.total / 1 + order.shipping_fee / 1).toFixed(2)" />
		</van-cell-group>

		<div class="info mt10" style="margin-bottom: 100px;">

			<p>订单记录：</p>

			<p v-for="(history, index) in order.orderHistory" :key="index">
				{{history.create_time}} {{history.remark}}
			</p>

		</div>




	</div>
</template>

<script>
	import {
		Tab,
		Tabs,
		Panel,
		Card
	} from "vant";


	export default {
		data() {
			return {
				order_id: 0,
				order: {
					orderItems: {},
					orderHistory: {}
				}
			};
		},
		created() {
			this.order_id = this.$route.query.order_id;
			this.loadItems(this.order_id);
		},
		methods: {


			loadItems(order_id) {

				this.apiPost('/shop.order/read', { order_id: order_id }).then(res => {
				  this.order = res.data;
				});

			},
			// 删除订单
			async delOrder(order_id) {

				await this.$dialog.confirm({
					message: "确定要删除该订单吗?"
				});

				// 请求服务器
				this.apiPost('/shop.order/delete', { order_id: order_id }).then(res => {

				  if (res.data > 0) {
				  	this.$toast("已删除该订单");
				  	this.$router.push('/order/0')
				  }

				});




			},
			// 订单轨迹
			async tracker() {
				this.$router.push({
					path: "/orderTracker",
					query: {
						order_id: this.order_id
					}
				})
			},
			// 确认收货
			async receiptOrder(order_id) {
				await this.$dialog.confirm({
					message: "请确认收到货物, 确认收货后无法撤销!"
				});

				// 请求服务器
        this.apiPost('/shop.order/complete', { order_id: order_id }).then(res => {

          if (res.data > 0) {
          	this.$toast("已确认收货")
          	this.$router.back(-1)
          }

        });

			},

},
		components: {
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[Panel.name]: Panel,
			[Card.name]: Card,

		}
	};
</script>



<style scoped>
	.mt10 {
		margin-top: 10px;
	}

	.pt10 {
		padding-top: 45px;
	}

	.info {
		color: #323233;
		background-color: #fff;
		padding: 10px 15px;
		line-height: 1.5;
font-size: 14px;

	}

	.order_footer {
		position: fixed;
		bottom: 0;
		height: 50px;
		box-sizing: border-box;
		text-align: right;
		margin-bottom: 0 !important;
		width: 100%;
		background-color: #fff;
		padding: 10px;
		border-top: 1px solid #f5f5f5;
	}
</style>
